<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragment:: head(~{:: title})">
  <title>Dexter的朋友圈</title>
</head>
<body>

  <!--导航-->
  <nav th:replace="_fragment :: menu(6)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
  </nav>

  <!--中间内容-->
  <div  class="m-container m-padded-tb-big">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="twelve column ">
            <h2 class="ui teal header">&nbsp;朋友圈</h2>
          </div>
        </div>
      </div>

      <div class="ui attached segment m-padded-tb-large">
          <ul style="font-size: 18px">
            <h2>加入朋友圈须知</h2>
            <li>网站无低俗色情的内容，没有政治敏感话题。</li>
            <li>网站需长期维护，一个月至少更新一次博客。</li>
            <li>想加入朋友圈的朋友，需先把本站加入您的友情链接，之后可以通过email或留言板联系我。</li>
            <h2 >申请格式</h2>
            <li>博客标题 ：Dexter</li>
            <li>博客连接 ：https://yexiang.top/</li>
            <li>头像地址 ：https://yexiang.top/images/avatar.jpg</li>
          </ul>
      </div>

      <!--content-->
      <div  style="padding-top: 15px; border: #2e383c;">
        <div class="ui green segment" >
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui middle aligned mobile reversed stackable grid" >

             <div style="width: 190px;height: 180px;float: left; padding:30px 35px ;text-align: center;"  th:each="friend : ${friends}">
               <a th:href="@{${friend.url}}" target="_blank">
               <div class="ui link cards">
                 <div class="card">
                   <div class="image">
                     <img th:src="@{${friend.avatar}==null ? '/images/avatar.png' : ${friend.avatar}}" >
                   </div>
                   <div class="content">
                     <div class="header" th:text="${friend.friendName}">Matt Giampietro</div>
                   </div>
                 </div>
               </div>
               </a>
             </div>

            </div>
          </div>

        </div>
      </div>

      <!--footer-->
      <div class="ui bottom attached segment" th:if="${friends.totalPages}>1">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <a th:href="@{/friend/(page=${friends.number}-1)}" th:unless="${friends.first}"  class="ui mini teal basic button">上一页</a>
          </div>
          <div class="right aligned column">
            <a th:href="@{/friend/(page=${friends.number}+1)}"  th:unless="${friends.last}" class="ui mini teal basic button">下一页</a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer class="ui inverted vertical segment m-padded-tb-massive" th:replace="_fragment:: footer ">
  </footer>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
  <script>
    $('#m-index').load(/*[[@{/footer/index}]]*/"/footer/index");
  </script>
</body>
</html>